<template>
	<view class="my_container">
		<custom-navbar-two :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_button">
				<view @click="updateCollor(1)" :class="{ activeClass: busPubInfo.resourceType == 1}">我要发售</view>
				<view @click="updateCollor(2)" :class="{ activeClass: busPubInfo.resourceType == 2}">我要求购</view>
			</view>
			<view class="my_container_body_card">
				<view class="head">
					<view >资源分类</view>
					<view class="title_one">{{busPubInfo.product1 == "" ? "一级" : busPubInfo.product1}}</view>
					<image @click="level1"></image>
					<view class="title">{{busPubInfo.product2 == "" ? "二级" : busPubInfo.product2}}</view>
					<image @click="showProp"></image>
					<view class="title">{{busPubInfo.product3 == "" ? "三级" : busPubInfo.product3}}</view>
					<image ></image>
					<!-- <view class="title">四级</view>
					<image></image> -->
				</view>
				<view class="xian"></view>
                <view class="my_input">
					<view class="my_input_head">
						<view class="head_head">标题</view>  
						<view class="head_input">
							<u--input  v-model="busPubInfo.title" border="bottom" clearable ></u--input>
						</view>
					</view> 
					<view class="my_input_body">
						<u--textarea   v-model="busPubInfo.pubContent" :formatter="formatter" ref="textarea"  placeholder="请输入内容" clearable ></u--textarea>
					</view> 
				</view>
				<view class="my_input_yuyin"><view>打字太慢，试试语音输入</view> <image @click="speak" src="../../static/imags/Voice.png"></image></view>
				<view class="my_input_biaoti" >上传图片/视频(限4张图片，1个视频)</view>
				<view class="show_add">
					<view class="show_add_left" @click="upPicVide">
						<image src="../../static/imags/photo.png"></image>
						<view>上传图片</view>
					</view>
					<view class="show_add_right" @click="uploadVide">
						<image src="../../static/imags/video.png"></image>
						<view >上传视频</view>
					</view>
				</view>
				<view class="photoShow" v-if="busPubInfo.picList.length > 0" >
				    <view class="photoShowItem" v-for="(item,index) in busPubInfo.picList">
				    	<image @click="previewMyImage(index)"  :src="item.fileUrl" :key="index"></image>
				    	<text class="delete-btn" @click.stop="removeImage(index)">x</text>
				    </view>
				</view>
				<view class="photoNo" v-else>
					暂未上传图片
				</view>
				<view class="videoShow" v-if="busPubInfo.videoList.length > 0 ">
					<video class="video1" id="myVideo" :src="busPubInfo.videoList[0].fileUrl"
					  enable-danmu danmu-btn controls></video>
				</view>
				<view class="videoShow" style="text-align: center;"  v-else>
					<view>暂未上传视频</view>
				</view>
				<view style="height: 20rpx;">
				</view>
			</view>
			<view class="fotter_input">
				<view class="fotter_input_head">
					<view class="fotter_input_head_o">价格</view>
					<view class="fotter_input_head_tw"><u--input
					 inputAlign="center"
							border="none"
							v-model="busPubInfo.price"
						  ></u--input>
					</view>
					<view class="fotter_input_head_t">元/吨</view>
					<image class="fotter_input_head_f" src="../../static/imags/Vector.png"></image>
				</view>
				<view class="fotter_input_body">
					<view class="fotter_input_body_o">位置</view>
					<view class="fotter_input_body_tw">
						{{busPubInfo.address}}
					</view>
					<image @click="getLatUU" class="fotter_input_body_f" src="../../static/imags/ditu.png"></image>
				</view>
			</view>
			<view class="foter_bottom" @click="add">
				立即修改
			</view>
			<view style="height: 28rpx;"></view>
			<u-picker :show="showLevel1" :columns="columns"  keyName="label" @confirm="confirm1" @cancel="cancel1"></u-picker>
			<!-- 筛选条件部分 -->
			 <view class="content" v-if="showPopup">
						  <view class="head_der">
							  <!-- 左侧分类列表 -->
							  <view class="left-menu">
							         {{busPubInfo.product1}}
							  </view>	
							  <!-- 右侧标签组 -->
							 <scroll-view class="right-content" scroll-y>
							   <view
							     class="tag-group"
							     v-for="(group, groupIndex) in groups"
							     :key="groupIndex"
							   >
							     <!-- 组标题 -->
							     <view class="group-header" @click="toggleGroup(groupIndex)">
							       <view class="group-title">{{ group.name }}</view>
							       <image
							         :src="group.expanded ? '../../static/imags/shang.png' : '../../static/imags/xia.png'"
							         class="toggle-icon"
							       ></image>
							     </view>
							 
							     <!-- 标签列表 -->
							     <view class="tag-list" v-if="group.expanded">
							       <view
							         class="tag"
							         v-for="(tag, tagIndex) in group.tags"
							         :key="tagIndex"
							         :class="{ active: tag.expanded }"
							         @click="toggleTag(groupIndex, tagIndex)"
							       >
							         {{ tag.name }}
							       </view>
							     </view>
							   </view>
							 </scroll-view>
			
						  </view>
			   
						<view class="footer">
						    <view class="btn cancel" @click="closePopup">取消</view>
						    <view class="btn reset" @click="resetFilters">重置</view>
						    <view class="btn confirm" @click="confirmSelection">确定</view>
						</view>
			 </view>
		</view>
	</view>
</template>

<script>
	import CustomNavbarTwo from "@/components/CustomNavbarTwo.vue";
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				busPubInfo: {
					id: "",
					picList:[],
					videoList:[]
				},
				parentId:null,
				showLevel1:false,
				columns:[[{id:1,label:"废纸"},{id:2,label:"设备"},{id:3,label:"废塑料"}]],
				showPopup: false,
				groups: [],
				groupIndex:null,
				tagIndex: null,
				pageTitle:"修改内容",
				value:""
		};
	},
	onLoad(e) {
		if(e && e.id) {
			this.busPubInfo.id = e.id
			this.getDetail()
		}
	},
	methods: {
		getDetail() {
			this.$https.get(this.$api.pubInfoDetail,{
				id:this.busPubInfo.id
			}).then(res => {
				if(res.code === 200) {
					this.busPubInfo = res.data
					//查询二级分类
					if(this.busPubInfo.product1 == '废纸') {
						this.parentId = 1
					}else if(this.busPubInfo.product1 == '设备'){
						this.parentId = 2
					}else{
						this.parentId = 3
					}
					this.productTypeList()
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			})
		},
		getLatUU() {
			console.log('当前位置的经度：');
			const _that = this
			uni.getLocation({
				type: 'wgs84',
				success:  res => {
					console.log(res)
					
				},
				fail: err => {
					console.log(err)
				}
			});
		},
		speak() {
			
		},
		upPicVide() {
			if(this.busPubInfo.picList.length >= 4  && this.busPubInfo.id == null) {
				return;
			}
			const _that = this
			uni.chooseImage({
				sourceType: ['camera', 'album'],
				success: function (res) {
					console.log(res)
					const  url = res.tempFilePaths[0]
					 _that.upload(url,2)
				}
			})	
		},
		removeImage(index) {
		      this.busPubInfo.picList.splice(index, 1);
		},
		previewMyImage(index) { // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
			var photoList =this.busPubInfo.picList.map(item => {
				return item.url
			})
			uni.previewImage({
				current: index,     // 当前显示图片的索引值
				urls: photoList,    // 需要预览的图片列表，photoList要求必须是数组
				loop:true,          // 是否可循环预览
			})
		},
		uploadVide() {
			const _that = this
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: function (res) {
					const  url = res.tempFilePath
					 _that.upload(url,1)
				}
			})
			
		},
		upload(imgUrl,type) {
	
		   const _that = this
		   uni.uploadFile({
		   			url: _that.$api.upload, 
		   			filePath: imgUrl,
		   			name: 'file',
		   			header: {
		   			    'Content-Type': 'application/json',
		   			    'Authorization':"Bearer " + uni.getStorageSync('token')
		   			},
		   			formData: {},
		   			success: (uploadFileRes) => {
		   				const result = uploadFileRes.data
		   				var res = JSON.parse(result)
		   				if(res.code === 200) {
							console.log(res.data)
							if(type == 1) {
								_that.busPubInfo.videoList = []
								_that.busPubInfo.videoList.push({
									ossId: res.data.ossId,
									fileUrl: res.data.url,
									fileType: "2"
								})
							}else{
								_that.busPubInfo.picList.push({
									ossId: res.data.ossId,
									fileUrl: res.data.url,
									fileType: "1"
								})
							}						
		   				}else{
		   					uni.showToast({
		   						title:res.errMsg,
		   						icon:'none'
		   				})
		   			}
		   		}
		   	});
		},
		// 切换组的展开状态
		toggleGroup(groupIndex) {
		  this.groups[groupIndex].expanded = !this.groups[groupIndex].expanded;
		},
		// 切换标签的选中状态
		toggleTag(groupIndex, tagIndex) {
			const flag = this.groups[groupIndex].tags[tagIndex].expanded
			// 遍历所有组和标签，将 selected 设置为 false
			this.groups.forEach(group => {
			  group.tags.forEach(tag => {
			    tag.expanded = false;
			  });
			});
		    this.groups[groupIndex].tags[tagIndex].expanded = !flag;
			this.groupIndex = groupIndex
			this.tagIndex = tagIndex
			// this.busPubInfo.product2 =  this.groups[groupIndex].name
			// this.busPubInfo.product3 =  this.groups[groupIndex].tags[tagIndex].name;
		},
		resetFilters() {
			this.groups.forEach(group => {
			  group.tags.forEach(tag => {
			    tag.expanded = false;
			  });
			});
			this.groupIndex = -1
			this.tagIndex = -1
		},
		showProp() {
			this.showPopup = true;
		},
		closePopup() {
		  this.showPopup = false;
		},
		confirmSelection() {
			if(this.groupIndex != -1 && this.tagIndex != -1) {
				this.busPubInfo.product2 =  this.groups[this.groupIndex].name
				this.busPubInfo.product3 =  this.groups[this.groupIndex].tags[this.tagIndex].name;
			}else{
				this.busPubInfo.product2 = ""
				this.busPubInfo.product3 = ""
			}
		  this.closePopup();
		},
		showu() {
			if(this.showPopup) {
				return
			}
			this.show2 = true
		},
		level1() {
			this.showLevel1 = true
		},
		confirm1(e) {
			this.busPubInfo.product1 = e.value[0].label
			this.parentId = e.value[0].id
			//查询二级分类
			this.productTypeList()
			this.showLevel1 = false
		},
		cancel1() {
			this.busPubInfo.product1 = ""
			this.parentId = null
			this.showLevel1 = false
		},
		updateCollor(btn) {
			this.busPubInfo.resourceType = btn
		},
		productTypeList() {
			const query = {
				parentId:this.parentId
			}
			this.$https.post(this.$api.productTypeList,query).then(res => {
				if(res.code === 200) {
					this.groups = res.data
					this.groups.forEach(group => {
					  if(group.name == this.busPubInfo.product2) {
						  group.tags.forEach(tag => {
						  	if(tag.name == this.busPubInfo.product3) {
						  	   tag.expanded = true;
						  	}else{
						  	  tag.expanded = false;
						  	}
						  })
					  }	else{
						  group.tags.forEach(tag => {
						  	 tag.expanded = false;
						  });
					  } 
					});
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			})
		},
		add() {
			uni.showLoading({
				title:"修改中，请稍等！"
			})
			this.$https.post(this.$api.updatePubInfo,this.busPubInfo).then(res => {
				if(res.code === 200) {
					uni.showToast({
						title:"修改成功",
						icon:"success"
					})
					setTimeout(() => {
						uni.navigateBack()
					},1500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			})
		}
	},
	onReady() {
		
    },
	}
</script>

<style lang="scss" scoped>
	.my_container {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;
		background: linear-gradient( 180deg, #DDFFDE 0%, #F7F7F7 29%, #F7F7F7 100%);
		width: 100%;
		.my_container_body {
			width: 750rpx;
			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}
			.my_container_body_button {
				margin-top: 12rpx;
				display: flex;
				width: 750rpx;
				height: 90rpx;
				.activeClass {
				  background: #1EE825; 
				  color: white; 
				  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				  font-weight: 500;
				  font-size: 28rpx;
				  font-style: normal;
				  text-transform: none;
				}
				view{
					width: 330rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					margin-left: 32rpx;
					background: white;
					color: black;
					border-radius: 84rpx 84rpx 84rpx 84rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					font-style: normal;
					text-transform: none;
				}
			}
			.my_container_body_card {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				.head {
					width: 686rpx;
					height: 90rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 90rpx;
					display: flex;
					:nth-child(1) {
						width: 112rpx;
						height: 90rpx;
						margin-left: 32rpx;
						text-align: left;
					}
					.title_one {
						width: 80rpx;
						text-align: right;
					}
					.title {
						width: 172rpx;
						height: 90rpx;
						text-align: right;
					}
					image{
						width: 28rpx;
						height: 28rpx;
						margin-top: 31rpx;
						background-image: url('/static/imags/xia_two.png');
					}
				}
				.xian {
					width: 622rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #E4E4E4;
					margin-left: 32rpx;
				}
				.my_input {
					width: 686rpx;
					height: 280rpx;
					.my_input_head {
						height: 90rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;
						.head_head {
							width: 72rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}
						.head_input {
							width: 550rpx;
							height: 70rpx;
							line-height: 70rpx;
							margin-top: 15rpx;
						}
					}
					.my_input_body {
						width: 622rpx;
						margin-left: 32rpx;
						height: 172rpx;
						margin-top: 10rpx;
					}
				}
				.my_input_yuyin {
					display: flex;
					width: 686rpx;
					margin-left:32rpx;
					height: 40rpx;
					margin-top: 12rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					font-style: normal;
					text-transform: none;
					view{
						width: 304rpx;;
						height: 40rpx;
					}
					image{
						width: 42rpx;
						height: 40rpx;
						margin-left: 16rpx;
					}
				}
				.my_input_biaoti {
					margin-top: 26rpx;
					width: 454rpx;
					height: 40rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 39rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 32rpx;
				}
				.show_add {
					margin-top: 26rpx;
					margin-left: 32rpx;
					width: 630rpx;
					height: 156rpx;
					display: flex;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					.show_add_left{
						width: 304rpx;
						height: 156rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;
						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}
						view{
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}
					.show_add_right {
						width: 304rpx;
						height: 156rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 22rpx;
						display: flex;
						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}
						view{
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}
				}
				.photoShow {
					margin-top: 30rpx;
					width: 666rpx;
					height: 144rpx;
					display: flex;
					.photoShowItem {
						position: relative;
						height: 144rpx;
						width: 144rpx;
						margin-left: 12rpx;
						image{
							height: 144rpx;
							width: 144rpx;
							margin-left: 18rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
						}
						.delete-btn {
						  position: absolute;
						  text-align: center;
						  top: -20rpx;
						  right: -24rpx;
						  font-size: 36rpx;
						  width: 20rpx;
						  height: 20rpx;
						  color: black;
						  // cursor: pointer;
						  // border: solid 2rpx #333;
						}
					}	
				}
				.photoNo {
					margin-top: 30rpx;
					width: 666rpx;
					margin-left: 12rpx;
					height: 144rpx;
					text-align: center;
					line-height: 144rpx;
				}
				.videoShow {
					margin-top: 30rpx;
					width: 630rpx;
					margin-left: 28rpx;
					height: 144rpx;
					.video1 {
						width: 630rpx;
						height: 144rpx;
					}
				}
	
			}
			.fotter_input {
				width: 686rpx;
				height: 188rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 14rpx;
				margin-left: 32rpx;
				.fotter_input_head {
					height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					border-bottom: 1rpx solid #E4E4E4;
					display: flex;
					.fotter_input_head_o {
						line-height: 104rpx;
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_head_tw {
						width: 437rpx;
						height: 70rpx;
						line-height: 70rpx;
						margin-top: 17rpx;
						padding-top: 11rpx;
					}
					.fotter_input_head_t {
						width: 70rpx;
						line-height: 104rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_head_f{
						width: 28rpx;
						height: 28rpx;
						margin-top: 33rpx;
						margin-left: 10rpx;
					}
				}
				.fotter_input_body {
					height: 94rpx;
					line-height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					display: flex;
					.fotter_input_body_o {
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_body_tw {
						margin-left: 10rpx;
						width: 504rpx;
						font-size: 26rpx;
						text-align: left;
					}
					.fotter_input_body_f{
						width: 28rpx;
						height: 28rpx;
						margin-top: 33rpx;
						margin-left: 10rpx;
					}
				}
			}
			.foter_bottom{
				margin-top: 14rpx;
				width: 686rpx;
				margin-left: 32rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #1EE825;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
		// 变量定义
		.content {
		  position: fixed; /* 固定位置 */
		   bottom: 0;       /* 从屏幕底部开始 */
		   left: 0;         /* 水平从左侧开始 */
		   width: 100%;     /* 占满屏幕宽度 */
		   height: 810rpx; /* 内容高度 */
		   background: #FFFFFF;
		   flex-direction: column;
		   z-index: 9999; /* 确保覆盖内容部分 */
		  background: #FFFFFF;
		  .head_der {
			  width: 100%;    
			  display: flex;
			  // 左侧分类列表
			  .left-menu {
			   width: 178rpx;
			   height: 676rpx;
			   background: #F6F6F6;
			   border-radius: 0rpx 24rpx 24rpx 0rpx;
		       text-align: center;
			   line-height: 676rpx;
			  }
			  		
			  // 右侧标签组
			  .right-content {
			    flex: 1;
			    width: 512rpx;
			    height: 676rpx;
			    overflow-y: scroll;
			    margin-left: 30rpx;
			    .tag-group {
				  width: 512rpx;
			      margin-bottom: 20rpx;
			      .group-header {
			        display: flex;
			        justify-content: space-between;
			        align-items: center;
			        padding: 10rpx 0;
			        font-size: 28rpx;
			        color: #333;
			        border-bottom: 1px solid #ddd;
			        .group-title {
			          flex: 1;
					  font-weight: 550;
			        }
			  		
			        .toggle-icon {
			          width: 28rpx;
			          height: 28rpx;
			        }
			      }
			  		
			      .tag-list {
			        display: flex;
			        flex-wrap: wrap;
			        gap: 10rpx;
			        margin-top: 10rpx;
			  		
			        .tag {
			          padding: 10rpx 20rpx;
			          font-size: 24rpx;
			          background-color: #f4f4f4;
			          border-radius: 20rpx;
			          color: #333;
			          cursor: pointer;
			  		
			          &.active {
			            background-color:  #1EE825;;
			            color: #fff;
			          }
			        }
			      }
			    }
			  }
		
		  }
		  // 底部操作栏
		  .footer {
		    display: flex;
		    width: 750rpx;
		    height: 134rpx;
		    .btn {
		     width: 207rpx;
		     height: 76rpx;
		     background: #FFFFFF;
		     border-radius: 84rpx 84rpx 84rpx 84rpx;
		     border: 2rpx solid #DADADA;
			 font-weight: 400;
			 font-size: 28rpx;
			 color: #777777;
			 margin-left: 32rpx;
			 text-align: center;
			 line-height: 76rpx;
			 margin-top: 32rpx;
		      &.confirm {
			   color: #FFFFFF;
		       background: #1EE825;
		      }
		    }
		  }
		}
	}
</style>